import { closeLoading, showLoading } from "@/utils/vant";
import { nanoid } from "nanoid";
import useWinScroll from "./useWinScroll";
interface Game {
  id: string;
  name: string;
  image?: string;
  type?: string;
}

interface GameCategory {
  title?: string;
  games: Game[];
}

interface ResData {
  msg: string;
  data: {
    hotGames: GameCategory;
    recent: GameCategory;
    newGames: GameCategory;
    fGames: GameCategory;
    pzlGames: GameCategory;
    actGames: GameCategory;
    sptGames: GameCategory;
    simGames: GameCategory;
    shGames: GameCategory;
    trdGames: GameCategory;
  };
}
const useFetchData = defineStore("home", () => {
  const refreshId = ref(0);
  const resData = reactive<ResData>({
    msg: "",
    data: {
      hotGames: { title: "", games: [] },
      recent: { title: "", games: [] },
      newGames: {
        games: [],
      },
      fGames: { title: "", games: [] },
      pzlGames: { title: "", games: [] },
      actGames: { title: "", games: [] },
      sptGames: { title: "", games: [] },
      simGames: { title: "", games: [] },
      shGames: { title: "", games: [] },
      trdGames: { title: "", games: [] },
    },
  });
  async function fetchData() {
    showLoading();
    const timer = setTimeout(() => {
      clearTimeout(timer);
      resData.data.hotGames = {
        title: "Hot Games",
        games: [],
      };
      resData.data.recent = {
        title: "Recent Play",
        games: [],
      };
      resData.data.newGames = {
        games: [],
      };
      resData.data.fGames = {
        title: "Featured Games",
        games: [],
      };
      resData.data.pzlGames = {
        title: "puzzle Games",
        games: [],
      };
      resData.data.actGames = {
        title: "Action Games",
        games: [],
      };
      resData.data.sptGames = {
        title: "Sports Games",
        games: [],
      };
      resData.data.simGames = {
        title: "Simulation Games",
        games: [],
      };
      resData.data.shGames = {
        title: "Shooting Games",
        games: [],
      };
      resData.data.trdGames = {
        title: "Trending Games",
        games: [],
      };

      Array(5)
        .fill({})
        .forEach((_, index) => {
          resData.data.newGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "new",
          };
        });
      Array(10)
        .fill({})
        .forEach((_, index) => {
          resData.data.hotGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "hot",
          };
          resData.data.recent.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "recent",
          };

          resData.data.fGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "featured",
          };
          resData.data.pzlGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "puzzle",
          };
          resData.data.actGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "action",
          };
          resData.data.sptGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "sports",
          };
          resData.data.simGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "simulation",
          };
          resData.data.shGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "shooting",
          };
          resData.data.trdGames.games[index] = {
            id: nanoid(4),
            name: nanoid(8),
            image: "demo.png",
            type: "trending",
          };
        });
      resData.msg = "success";
      refreshId.value++;
      closeLoading();
      nextTick(() => {
        const { setupObserver } = useWinScroll();
        setupObserver();
      });
    }, 300);
  }
  onMounted(() => {
    fetchData();
  });
  const hasGames = computed(() => {
    const {
      recent,
      pzlGames,
      actGames,
      sptGames,
      simGames,
      shGames,
      hotGames,
      trdGames,
      fGames,
      newGames,
    } = resData.data;
    return [
      recent.games,
      newGames.games,
      hotGames.games,
      fGames.games,
      pzlGames.games,
      actGames.games,
      sptGames.games,
      simGames.games,
      shGames.games,
      trdGames.games,
    ].some((games) => games.length > 0);
  });
  return { resData, fetchData, refreshId, hasGames };
});

export const useHomeRefs = () => {
  const homeStore = useFetchData();
  return storeToRefs(homeStore);
};
export default useFetchData;
